<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>汽车列表</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .layui-form-label {
            width: 100px;
        }
    </style>
</head>
<body style="padding: 15px;background-color: whitesmoke;">
<div class="layui-layout layui-layout-admin">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="searchForm" lay-filter="searchForm">
                <div class="layui-form-item layui-inline">
                    <label for="carNo" class="layui-form-label">车牌号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="carNo" id="carNo" placeholder="车牌号">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="color" class="layui-form-label">颜色</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="color" id="color" placeholder="颜色">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="categoryId" class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="categoryId" id="categoryId">
                            <option value="">[选择分类]</option>
                            <c:forEach items="${categoryList}" var="category">
                                <option value="${category.id}">${category.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="status" class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" id="status">
                            <option value="">[选择状态]</option>
                            <option value="1">可用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                        <button class="layui-btn" id="clear" type="button">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table lay-filter="dataTable" id="dataTable"></table>
        </div>
    </div>
    <div class="layui-footer" style="left:0">底部固定区域</div>
</div>
</body>
<script>
    var form, table;
    function searchForm(field={}){
        table.reload('dataTable',{
            where:{
                param:"list",
                ...field
            },
            page:{
                curr:1
            }
        })
    }
    $(function () {
        layui.use(function () {
            form = layui.form;
            table = layui.table;
            form.on("submit(search)", function ({field}) {
                searchForm(field);
                return false;
            })
            $("#clear").click(function () {
                $("#searchForm")[0].reset();
                searchForm();
            })
            table.render({
                elem: "#dataTable",
                url: "car",
                where: {
                    param: "list"
                },
                toolbar: "#tableTemplet",
                page: true,
                limit: 5,
                limits: [5, 10, 15, 20, 50],
                parseData(res) {
                    let code = 0;
                    if (res.code !== 200) {
                        code = res.code;
                    }
                    return {
                        code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.list
                    }
                },
                cols: [[
                    {field: "id", title: "编号"},
                    {field: "carNo", title: "车牌号"},
                    {field: "color", title: "颜色"},
                    {field: "name",title:"分类"},
                    {field: "status", title: "状态", templet: "#statusTemplet"},
                    {title: "操作", templet: "#optTemplet", fixed: "right"}
                ]]
            })

            table.on("tool(dataTable)", function ({event, data}) {
                switch (event) {
                    case "update":
                        sessionStorage.setItem("dataId", data.id)
                        layer.open({
                            type: 2,
                            title: "信息",
                            area: ["700px", "500px"],
                            content: "car?param=edit"
                        })
                        break;
                    case "delete":
                        layer.confirm('确定删除编号【' + data.id + '】的数据吗？', {icon: 3,title: "询问"}, function (index) {
                            $.ajax({
                                url: "car",
                                method: "post",
                                data: {
                                    param: "delete",
                                    id: data.id
                                },
                                dataType:"json",
                                success({code,msg}){
                                    if(code === 200){
                                        layer.msg("删除成功！",{icon:6})
                                        table.reload('dataTable');
                                    }else{
                                        layer.alert(msg,{icon:5});
                                    }
                                }
                            })
                            layer.close(index);
                        })
                        break;
                    case "status":
                        let {id, status} = data;
                        let confirmHtml = '<span style="cole:red">禁用</span>';
                        let updateStatus = 2;
                        if (status === 2) {
                            confirmHtml = '<span style="cole:green">可用</span>';
                            updateStatus = 1;
                        }
                        layer.confirm("确定更改编号【" + data.id + '】的状态为' + confirmHtml + '吗？', {
                            icon: 3,
                            title: "询问"
                        }, function (index) {
                            $.ajax({
                                url: "car",
                                data: {
                                    id,
                                    status: updateStatus,
                                    param: "update"
                                },
                                method: "post",
                                dataType: "json",
                                success(res) {
                                    if (res.code === 200) {
                                        layer.msg("更新状态成功！", {icon: 6});
                                        table.reload('dataTable');
                                    } else {
                                        layer.alert(res.msg, {icon: 5})
                                    }
                                }
                            });
                            layer.close(index);
                        })
                        break;
                    default:
                        console.log("点击异常！");
                        break;
                }
            });
            table.on("toolbar(dataTable)", function ({event}) {
                switch (event) {
                    case "add":
                        layer.open({
                            type:2,
                            title:"添加",
                            area:["700px","500px"],
                            content:"car?param=edit"
                        })
                        break;
                    default:
                        layer.alert("按钮点击异常！", {icon: 4});
                        break;
                }
            });
        })
    })
</script>
<script type="text/html" id="optTemplet">
    <button type="button" lay-event="update" class="layui-btn layui-btn-sm">修改</button>
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm">删除</button>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-blue">可用</button>
    {{# }else{ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-red">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="tableTemplet">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>
</html>
